<template>
  <el-row style="height: 610px">
    <el-col :span="24">
      <template v-for="op in ops">
        <el-card class="box-card" shadow="hover" style="margin-top: 10px">
          <template #header>
            <div class="card-header">
              <el-row :gutter="24">
                <el-col :span="20">
                  <p>
                    创建时间：{{ formatTime(op.createTime) }}
                  </p>
                </el-col>
                <el-col :span="4">
                  <p>
                    缴费状态：
                    <el-tag type="danger" v-if="op.opStatus == 1">未支付</el-tag>
                    <el-tag v-else-if="op.opStatus == 2">已支付</el-tag>
                  </p>
                </el-col>
              </el-row>
            </div>
          </template>
          <p>
            缴费项目：{{ op.opDetail }}
          </p>
          <p style="font-size: 20px; color: red">
            费用：{{ cheng(op.opMoney, op.opDiscount) }}
          </p>
          <p>
            原价：{{ op.opMoney }}  折扣：{{ cheng(100, op.opDiscount) }}%
          </p>
          <template #footer>
            <el-button v-if="op.opStatus == 1" type="primary" @click="giveMoney(op)" icon="Wallet">缴费</el-button>
            <el-button v-if="op.opStatus == 2" type="danger" @click="deleteOp(op)" icon="Delete">删除记录</el-button>
          </template>
        </el-card>
      </template>
    </el-col>
  </el-row>
</template>

<script>
import {fetchAllOp, removeOp, renewOp} from "@/api/op.js";
import jsCookie from "jscookie";
import {ElNotification} from "element-plus";
import {renewRegBYOpId} from "@/api/reg.js";

export default {
  name: "op",
  data() {
    return {
      token: '',
      ops: [],
    }
  },
  created() {
    this.token = jsCookie.get("token");
    this.fetchAllOp();
  },
  methods: {
    async deleteOp(op) {
      try {
        await removeOp(op.opId).then(async (response) => {
          if (response.data.code == 200) {
            ElNotification({
              title: '成功！',
              message: "删除成功！",
              type: 'success',
            });
            this.fetchAllOp();
          } else {
            ElNotification({
              title: '失败！',
              message: response.data.msg,
              type: 'warning',
            });
          }
        })
      } catch (e) {
        ElNotification({
          title: '失败！',
          message: '出现未知问题，请联系管理员！',
          type: 'error',
        })
      }
    },
    async updateOP(op) {
      try {
        await renewOp(op).then(async (response) => {
          if (response.data.code == 200) {
            ElNotification({
              title: '成功！',
              message: "缴费成功！",
              type: 'success',
            });
            let reg = {
              opId: op.opId,
              regStatus: 2,
            };
            await renewRegBYOpId(this.token, reg);
            this.fetchAllOp();
          } else {
            ElNotification({
              title: '失败！',
              message: response.data.msg,
              type: 'warning',
            });
          }
        })
      } catch (e) {
        ElNotification({
          title: '失败！',
          message: '出现未知问题，请联系管理员！',
          type: 'error',
        });
      }
    },
    giveMoney(op) {
      op.opStatus = 2;
      this.updateOP(op);
    },
    cheng(money, discount) {
      return money * discount;
    },
    formatTime(timeStr) {
      const appointmentTime = new Date(timeStr);
      const year = appointmentTime.getFullYear();
      const month = String(appointmentTime.getMonth() + 1).padStart(2, '0');
      const day = String(appointmentTime.getDate()).padStart(2, '0');
      const hours = String(appointmentTime.getHours()).padStart(2, '0');
      const minutes = String(appointmentTime.getMinutes()).padStart(2, '0');
      const seconds = String(appointmentTime.getSeconds()).padStart(2, '0');
      return `${year}年${month}月${day}日 ${hours}时${minutes}分${seconds}秒`;
    },
    async fetchAllOp() {
      const response = await fetchAllOp(this.token);
      this.ops = response.data.data;
    }
  }
}
</script>

<style scoped>

</style>
